<template>
  <ul class="note-tree">
    <li v-for="note in filteredNotes" :key="note.id">
      <div
        class="note-item"
        :class="{ selected: selectedNote && selectedNote.id === note.id }"
        :style="{ paddingLeft: `${note.depth * 16 + 12}px` }"
        @click="onNoteClick(note)"
        @dblclick="handleRename(note)"
      >
        <button
          v-if="note.children && note.children.length > 0"
          @click.stop="toggleExpand(note.id)"
          class="toggle"
          :aria-label="expandedNodes[note.id] ? '折叠' : '展开'"
        >
          <i
            class="fa-solid"
            :class="expandedNodes[note.id] ? 'fa-chevron-down' : 'fa-chevron-right'"
          ></i>
        </button>

        <input
          v-if="editingNoteId === note.id"
          v-model="newName"
          type="text"
          class="rename-input"
          @blur="handleRenameSubmit(note.id)"
          @keydown.enter.prevent="handleRenameSubmit(note.id)"
          autofocus
        />
        <span
          v-else
          class="note-label"
        >
          <i v-if="note.icon" :class="note.icon" class="note-icon" :style="{ color: note.iconColor || '#5b6479' }"></i>
          {{ note.name }}
        </span>

        <div class="actions">
          <button class="icon-btn" title="添加子笔记" @click.stop="onNewNote(note.id)">
            <i class="fa-solid fa-plus" style="color: #3bb273"></i>
          </button>
          <button class="icon-btn" title="编辑笔记" @click.stop="onEditNote(note)">
            <i class="fa-solid fa-pen" style="color: #4c6ef5"></i>
          </button>
          <button class="icon-btn" title="删除笔记" @click.stop="confirmDelete(note)">
            <i class="fa-solid fa-trash" style="color: #f06565"></i>
          </button>
        </div>
      </div>

      <NoteTree
        v-if="note.children && note.children.length > 0 && expandedNodes[note.id]"
        :notes="note.children"
        :selected-note="selectedNote"
        :on-note-click="onNoteClick"
        :on-new-note="onNewNote"
        :on-edit-note="onEditNote"
        :on-delete-note="onDeleteNote"
        :on-rename-note="onRenameNote"
        :search-term="searchTerm"
        :expanded-nodes="expandedNodes"
        :toggle-expand="toggleExpand"
      />
    </li>
  </ul>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  notes: { type: Array, default: () => [] },
  selectedNote: Object,
  onNoteClick: Function,
  onNewNote: Function,
  onEditNote: Function,
  onDeleteNote: Function,
  onRenameNote: Function,
  searchTerm: String,
  expandedNodes: { type: Object, default: () => ({}) },
  toggleExpand: Function,
});

const editingNoteId = ref(null);
const newName = ref('');

const filteredNotes = computed(() => {
  if (!props.searchTerm) return props.notes || [];
  return (props.notes || []).filter((note) => {
    if (!props.searchTerm) return true;
    return (
      note.name.includes(props.searchTerm) ||
      (note.children && note.children.some((child) => child.name.includes(props.searchTerm)))
    );
  });
});

function handleRename(note) {
  editingNoteId.value = note.id;
  newName.value = note.name;
}

function handleRenameSubmit(noteId) {
  if (newName.value.trim()) {
    props.onRenameNote && props.onRenameNote(noteId, newName.value);
    editingNoteId.value = null;
  }
}

function confirmDelete(note) {
  if (window.confirm(`确定要删除笔记 "${note.name}" 吗？`)) {
    props.onDeleteNote && props.onDeleteNote(note.id);
  }
}
</script>

<style scoped>
.note-tree {
  list-style: none;
  padding: 0;
  margin: 0;
}

.note-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0px 12px;
  border-radius: 12px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid transparent;
  transition: border 0.2s ease, background 0.2s ease;
  cursor: pointer;
}

.note-item:hover {
  border-color: rgba(94, 119, 255, 0.25);
  background: rgba(255, 255, 255, 0.9);
}

.note-item.selected {
  border-color: rgba(76, 110, 245, 0.4);
  background: rgba(76, 110, 245, 0.08);
}

.toggle {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.rename-input {
  flex: 1;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(151, 161, 187, 0.6);
  background: rgba(255, 255, 255, 0.85);
}

.note-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #2f3a5a;
}

.note-icon {
  font-size: 14px;
  color: #5b6479;
  width: 16px;
  text-align: center;
}

.actions {
  display: flex;
  gap: 6px;
}

.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(207, 215, 235, 0.8);
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border 0.2s ease;
}

.icon-btn:hover {
  background: rgba(76, 110, 245, 0.08);
  border-color: rgba(76, 110, 245, 0.3);
}

 

@media (max-width: 768px) {
  .note-item {
    padding: 10px;
  }

  .actions {
    gap: 4px;
  }
}
</style>
